<template>
	<view class="page-wallet">
		<view class="h5">为了确保您已将助记词按照正确顺序抄写，请选择对应序号的单词。</view>
		<view class="sort-number">#{{wallet.check1+1}}</view>
		<view class="phrase-lists">
			<block v-for="(val,index) in question1" :key="index">
				<view class="word bg-box" :class="val.click?'text-highlight':''" @click="answer1(val)">{{val.word}}
				</view>
			</block>

		</view>
		<view class="sort-number">#{{wallet.check2+1}}</view>
		<view class="phrase-lists">
			<block v-for="(val,index) in question2" :key="index">
				<view class="word bg-box" :class="val.click?'text-highlight':''" @click="answer2(val)">{{val.word}}
				</view>
			</block>
		</view>
		<view class="button-box-padding" style="margin-top:30px;">
			<button class="btn-primary btn-block" :disabled="!isCorrect" @click="confirmWallet">完成</button>
		</view>
	</view>
</template>

<script>
	import api from "@/utils/api/wallet/index.js"
	export default {
		data() {
			return {
				question1: [],
				question2: [],
				userAnswer1: "",
				userAnswer2: "",
				correctAnswer1: '',
				correctAnswer2: '',
				isCorrect: false,
				wallet: {}
			}
		},
		onLoad(e) {
			this.wallet = JSON.parse(e.wallet);
			console.log(e.wallet)
			for (let i = 0; i < this.wallet.mnemonic_arr.length; i++) {
				let val = this.wallet.mnemonic_arr[i]
				let item = {
					word: val,
					click: false
				}
				if (i < 6) {
					this.question1.push(item);
				} else {
					this.question2.push(item);
				}
			}
			this.correctAnswer1 = this.wallet.mnemonic_arr[this.wallet.check1];
			this.correctAnswer2 = this.wallet.mnemonic_arr[this.wallet.check2];

			//打乱顺序
			this.question1.sort(this.randomsort);
			this.question2.sort(this.randomsort);
			console.log("correctAnswer1", this.correctAnswer1)
			console.log("correctAnswer2", this.correctAnswer2)

		},
		methods: {
			randomsort(a, b) {
				return Math.random() > .5 ? -1 : 1;
				//用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
			},

			answer1(val) {
				let selectWord = val.word;
				for (var i = 0; i < this.question1.length; i++) {
					let item = this.question1[i];
					let word = item.word;
					if (word == selectWord) {
						this.question1[i].click = true;
						this.userAnswer1 = word;
					} else {
						this.question1[i].click = false;
					}
					this.checkAnswer();
				}
			},
			answer2(val) {
				let selectWord = val.word;
				for (var i = 0; i < this.question2.length; i++) {
					let item = this.question2[i];
					let word = item.word;
					if (word == selectWord) {
						this.question2[i].click = true;
						this.userAnswer2 = word;
					} else {
						this.question2[i].click = false;
					}
					this.checkAnswer();
				}
			},
			checkAnswer() {
				if (this.correctAnswer1 == this.userAnswer1 && this.correctAnswer2 == this.userAnswer2) {
					this.isCorrect = true;
				} else {
					this.isCorrect = false;
				}
			},
			async confirmWallet() {
				let post = {
					check1: this.wallet.check1,
					check2: this.wallet.check2,
					answer1: this.userAnswer1,
					answer2: this.userAnswer2,
				}
				let res = await api.verifyMnemonic(post)
				if (res.status == 1) {
					uni.reLaunch({
						url: "create-wallet-success"
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	view {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.verify-box {
		width: 100%;
		min-height: 200px;
		margin: 15px 0;
		border-radius: 6px;

	}

	.sort-number {
		font-weight: bold;
		padding: 5px;
	}

	.phrase-lists {
		width: 100%;
		display: block;

		.word {
			display: block;
			float: left;
			padding: 30px 10px;
			margin: 5px;
			border-radius: 6px;
			border: 1px solid #999;
			justify-content: space-between;
			text-align: center;
			width: 30%;
		}
	}

	.page-wallet {
		padding: 15px;

		.phrase-box {
			border-radius: 6px;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;
			margin: 15px 0;

			.phrase-item {
				width: 33.33%;
				padding: 10px 5px;
				text-align: center;
			}
		}
	}

	.remark {
		.title {
			margin: 15px 0;
		}

		.text {
			font-size: 14px;
		}
	}
</style>
